$(function () {
    // alert(11)
    //存储的数据格式：var todolist =  [{ title : ‘xxx’, done: false}]
    //利用事件对象.keyCode判断用户按下回车键（13）
    load();
    $('#title').on('keydown', function (event) {
        if (event.keyCode === 13) {
            if ($(this).val() === '') {
                alert('请输入您要做的内容')
            } else {
                //接受本地存储里面的数据
                var local = getDate();
                //console.log(local);
                //把local数据
                local.push({ title: $(this).val(), done: false });
                //把这个数组local存储到本地存储里面
                savaDate(local)
                load();
                $(this).val('')
            }
        };
    });
    //删除操作
    $('ol,ul').on('click', 'a', function () {
        // alert(11)
        //先获取本地存储
        var data = getDate();
        console.log(data);
        //修改数据 attr()可以获取自定义的属性
        var index = $(this).attr('id')
        //点那个a就删除那条数据
        data.splice(index, 1)
        //保存到本地存储
        savaDate(data)
        //重新渲染加载页面
        load()

    })

    //4.todolist 正在进行和已完成选中的操作
    $('ol,ul').on('click', 'input', function () {
        // alert(11)
        //先获取本地存储
        var data = getDate()
        //修改数据
        var index = $(this).siblings('a').attr('id')
        console.log(index);
        data[index].done = $(this).prop('checked')
        //重新保存到本地存储
        savaDate(data)
        //重新渲染加载页面
        load();

    })

    //获取本地存储的数据
    function getDate() {
        //将读取到的数据传给date
        var data = localStorage.getItem('todolist')
        if (data !== null) {
            //本地存储里面的数据是字符串格式的，但我们需要的是对象格式
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    //保存本地存储数据
    function savaDate(data) {
        localStorage.setItem('todolist', JSON.stringify(data))
    }

    //渲染加载到页面
    function load() {
        //先读取本地存储的数据
        var data = getDate()
        console.log(data)
        //遍历之前要清空ol里面的元素内容
        $('ol,ul').empty();
        var todoCount = 0 //正在进行的个数
        var doneCount = 0 //已经完成的个数
        //遍历这个数据
        $.each(data, function (i, ele) {
            //console.log(ele);
            if (ele.done == true) {
                $('ul').prepend(` <li><input type="checkbox" name="" id="" checked = 'checked'<p>${ele.title}</p><a href="" id ='${i}'></a></li>`)
                doneCount++
            } else {
                $('ol').prepend(` <li><input type="checkbox" name="" id=""><p>${ele.title}</p><a href="" id ='${i}'></a></li>`)
                todoCount++
            }
        })
        $('#todocount').text(todoCount)
        $('#donecount').text(doneCount)
    }
});